<template>
  <div class="admin">
    <div class="header">
      <h3 class="title">管理员工作台</h3>
      <!-- 菜单 -->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="rgb(245, 244, 244)"
      >
        <el-menu-item index="1" @click="tabchange('1')">员工中心</el-menu-item>
        <el-menu-item index="2" @click="tabchange('2')">业务列表</el-menu-item>
        <el-menu-item index="3" @click="tabchange('3')">员工注册</el-menu-item>
        <el-menu-item index="4" @click="tabchange('4')">消息派发</el-menu-item>
      </el-menu>
      <!-- 个人信息 -->
      <el-dropdown>
        <span class="el-dropdown-link">
          当前用户：{{ username }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-button
            :plain="true"
            style="border: none; width: 70px; height: 35px"
            @click="exit()"
            >退出</el-button
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="main">
      <!-- 员工列表 -->
      <div class="content-box" v-if="activeIndex == '1'">
        <div class="searchBtn" style="display: flex">
          <el-input v-model="search" size="big" placeholder="请输入员工名称" />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px"
          ></el-button>
        </div>
        <el-table
          :data="
            employeeList.filter(
              (data) =>
                !search ||
                data.userName.toLowerCase().includes(search.toLowerCase())
            )
          "
          style="width: 100%"
          stripe
          v-loading="loading"
        >
          <el-table-column label="创建日期" prop="createTime"></el-table-column>
          <el-table-column label="员工姓名" prop="userName"></el-table-column>
          <el-table-column label="性别" prop="sex"></el-table-column>
          <el-table-column label="年龄" prop="age"></el-table-column>
          <el-table-column label="员工密码" prop="passWord"></el-table-column>
          <el-table-column label="员工电话" prop="phone"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="updateEmployee(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteEmployee(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          :visible.sync="dialogVisible"
          width="50%"
          @close="clearComp()"
        >
          <update-employee
            v-if="showComp"
            :item="employeeDetail"
            :clearComp="clearComp"
          ></update-employee>
        </el-dialog>
      </div>
      <!-- 业务列表 -->
      <div class="content-box" v-if="activeIndex == '2'">
        <div class="searchBtn" style="display: flex">
          <el-input v-model="search2" size="big" placeholder="请输入业务类型" />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px"
            @click="getbusinessList()"
          ></el-button>
        </div>
        <el-table :data="list" style="width: 100%" stripe v-loading="loading">
          <el-table-column label="办理日期" prop="createTime"></el-table-column>
          <el-table-column label="用户" prop="name"></el-table-column>
          <el-table-column label="联系电话" prop="phone"></el-table-column>
          <el-table-column label="邮箱" prop="email"></el-table-column>
          <el-table-column label="业务类型" prop="type"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" @click="updateBusiness(scope.row)">编辑</el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteBusiness(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
         <el-dialog
          :visible.sync="dialogVisible"
          width="50%"
          @close="clearComp()"
        >
          <update-business
            v-if="showComp"
            :item="businessDetail"
            :clearComp="clearComp"
          ></update-business>
        </el-dialog>
        <el-pagination
          @current-change="getbusinessList"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next"
        ></el-pagination>
      </div>
      <div class="content-box" v-if="activeIndex == '3'">
        <add-employee></add-employee>
      </div>
      <div class="content-box" v-if="activeIndex == '4'">
        <add-message></add-message>
      </div>
    </div>
  </div>
</template>

<script>
import adminRequest from "../request/admin";
import indexRequest from "../request/index";
import addEmployee from "../components/addEmployee.vue";
import addMessage from "../components/addMessage.vue";
import updateEmployee from "../components/updateEmployee.vue";
import updateBusiness from "../components/updateBusiness.vue";
import cookie from "js-cookie";
export default {
  data() {
    return {
      userinfo: null,
      username: "",
      activeIndex: "1", //菜单下标
      search: "",
      search2: "",
      employeeList: [], //员工列表
      list: [],
      total: null, //客户列表数量
      pageNo: 1, //业务列表页码
      pageSize: 5, //每页条数
      loading: false, //加载状态控制
      dialogVisible: false, //编辑框开关
      showComp: true, //子组件的开关
      employeeDetail: [], //要编辑的用户信息
    };
  },
  components: {
    addEmployee,
    addMessage,
    updateEmployee,
    updateBusiness,
  },
  methods: {
    // 菜单切换
    tabchange(index) {
      this.activeIndex = index;
      this.getEmployeeList();
      this.getbusinessList();
    },

    // 退出
    exit() {
      window.localStorage.removeItem("userinfo");
      cookie.remove("satoken");
      this.$router.push({ path: "/" });
      this.$message.success("注销成功!");
    },

    // 关闭对话框
    clearComp() {
      this.dialogVisible = false;
      this.showComp = false;
    },

    // 点击编辑员工信息
    updateEmployee(item) {
      this.dialogVisible = true;
      this.showComp = true;
      this.employeeDetail = item;
    },

    // 删除员工
    deleteEmployee(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          adminRequest.deleteEmployee(item.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getEmployeeList();
            }
          });
        })
        .catch(() => {});
    },

    // 员工列表
    getEmployeeList() {
      adminRequest.getEmployeeList({}).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          const result = res.data.result;
          this.employeeList = result;
          setTimeout(() => {
            this.loading = false;
          }, 500);
        }
      });
    },

    // 删除客户业务信息(同上)
    deleteBusiness(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          indexRequest.deleteBusiness(item.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getbusinessList();
            }
          });
        })
        .catch(() => {});
    },

    // 点击编辑办理业务信息
    updateBusiness(item) {
      this.dialogVisible = true;
      this.showComp = true;
      this.businessDetail = item;
    },

    // 业务列表
    getbusinessList(page = 1) {
      this.pageNo = page;
      adminRequest
        .getbusinessList({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          type: this.search2,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            const result = res.data.result;
            this.total = result.total;
            this.list = result.result;
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },
  },

  created() {
    this.userinfo = JSON.parse(window.localStorage.getItem("userinfo"));
    if (
      this.userinfo == null ||
      this.userinfo == "" ||
      this.userinfo.type != "admin"
    ) {
      window.localStorage.removeItem("userinfo");
      cookie.remove("satoken");
      this.$router.push({ path: "/" });
      this.$notify({
        title: "您不是管理员，无法访问",
        type: "warning",
      });
    } else {
      this.username = this.userinfo.userName;
    }

    this.getEmployeeList();
    this.getbusinessList();
  },
};
</script>

<style lang="scss" scoped>
@import "../css/adminHome.scss";
</style>